<template>
  <div style="overflow: hidden">
    <div class="title">预警中心</div>

    <el-row>
      <el-col
        :span="8"
        v-for="(item, index) in tab"
        :key="index"
        :class="item.isActive ? 'active' : ''"
        @click.native="handletab(index)"
        >{{ item.name }}</el-col
      >
    </el-row>

    <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">
        {{ seldrop }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command="item.value" v-for="(item, index) in dropdown" :key="index">{{ item.name }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <div class="date">
      <el-date-picker
        v-model="defaultRange"
        type="datetimerange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleChange"
      >
      </el-date-picker>
    </div>

    <div class="warnlist">
      <div class="warnlist-item" v-for="(item, index) in list" :key="index" @click="rowClick(item)">
        <div class="warnlist-item-t">
          <span class="address">{{ item.address }}</span>
          <span class="type">{{ item.warnType }}</span>
        </div>
        <div class="warnlist-item-b">
          <span class="desc">内容：</span>
          <span class="content">{{ item.warnContent }}</span>
        </div>
      </div>
    </div>

    <!-- <el-dialog title="预警详情" :visible.sync="dialogVisible" custom-class="township-dialog" width="1150px" height="800px" append-to-body>
      <warningDetails v-if="dialogVisible && !videoDetail" :eventDetailMsg="waringDetailMsg" @close="dialogVisible = !dialogVisible"></warningDetails>
    </el-dialog> -->
  </div>
</template>

<script>
import { getOverviewOfEarlyWarningCenter } from "../../utils/api";
// import warningDetails from "../nmodule/warningDetails"
export default {
  name: "warnCenter",
  components:{
    // warningDetails,
  },
  data() {
    return {
      startTime: this.Tebs.getBeforeDate(29) + " 00:00:00",
      endTime: this.Tebs.date2String_OnlyDate(new Date()) + " 23:59:59",
      defaultRange: [],
      tab: [
        { name: "红色预警", isActive: false },
        { name: "黄色预警", isActive: false },
        { name: "蓝色预警", isActive: false },
      ],
      dropdown: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "事件类预警",
          value: "event",
        },
        {
          name: "视频类预警",
          value: "video",
        },
        {
          name: "物联类预警",
          value: "iot",
        },
        {
          name: "其他类预警",
          value: "other",
        },
      ],
      seldrop: "全部",
      warnType: "",
      warnStatus: "",
      isActive: false,
      list: [],

      // yhadd
      waringDetailMsg: null,
      dialogVisible: false,
      videoDetail: false,
    };
  },
  mounted() {
    this.defaultRange = [this.startTime, this.endTime];
    this.getData();
  },
  methods: {
    getData() {
      getOverviewOfEarlyWarningCenter(
        "startTime=" +
          this.startTime +
          "&endTime=" +
          this.endTime +
          "&warnType=" +
          this.warnType +
          "&warnStatus=" +
          this.warnStatus
      ).then((res) => {
        if (res.data.status === 200) {
          for (let i = 0, l = res.data.data.length; i < l; i++) {
            let warnType = res.data.data[i].warnType;
            res.data.data[i].warnType =
              warnType === "iot"
                ? "物联类预警"
                : warnType === "event"
                ? "事件类预警"
                : warnType === "video"
                ? "视频类预警"
                : "其他类预警";
          }
          this.list = res.data.data;
        }
      });
    },
    handleCommand(command) {
      for (let i = 0, l = this.dropdown.length; i < l; i++) {
        if (command === this.dropdown[i].value) {
          this.seldrop = this.dropdown[i].name;
        }
      }
      this.warnStatus = command;
      this.getData();
    },
    handletab(index) {
      if (this.tab[index].isActive) {
        this.tab[index].isActive = !this.tab[index].isActive;
        this.warnStatus = "";
        this.getData();
        return;
      }
      for (let i = 0, l = this.tab.length; i < l; i++) {
        this.tab[i].isActive = false;
      }
      this.tab[index].isActive = !this.tab[index].isActive;
      this.warnStatus = 2 - index;
      this.getData();
    },
    handleChange(value) {
      this.startTime = this.Tebs.date2String_OnlyDate(value[0]) + " 00:00:00";
      this.endTime = this.Tebs.date2String_OnlyDate(value[1]) + " 23:59:59";
      this.getData();
    },

    rowClick(data){
      this.videoDetail = !!data.videoUrl;
      this.dialogVisible = !this.dialogVisible;
      // this.waringDetailMsg = data;
      window.warningDetailsInit(data);
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 300px;
  height: 60px;
  background-image: url("../../assets/image/global/title.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 60px;
  font-size: 24px;
  font-style: oblique;
  color: #fff;
  padding-left: 40px;
  margin-bottom: 10px;
}

.el-row {
  width: 70%;
  float: left;
}
.el-col-8 {
  width: 123px;
  height: 43px;
  background-image: url("../../assets/image/left/tab.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: 43px;
  color: #fff;
  font-size: 18px;
}
.el-dropdown {
  width: 25%;
  float: left;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  padding-left: 20px;
  box-sizing: border-box;
  background: linear-gradient(
    0deg,
    rgba(22, 79, 58, 0.7),
    rgba(5, 35, 29, 0.7)
  );
  border: 1px solid #0affbd;
  box-shadow: 0px 0px 8px 0px rgba(2, 45, 33, 0.46);
  border-radius: 1px;
}

.el-range-editor {
  background: linear-gradient(
    0deg,
    rgba(22, 79, 58, 0.7),
    rgba(5, 35, 29, 0.7)
  );
  border: 1px solid #0affbd;
  box-shadow: 0px 0px 8px 0px rgba(2, 45, 33, 0.46);
  opacity: 0.8;
  width: 94%;
  margin-left: 3%;
  margin-top: 10px;
  border-radius: 1px;
}

.warnlist {
  width: 95%;
  margin: 10px auto;
  height: 415px;
  overflow-y:auto;
  background-image: url("../../assets/image/right/warnlist.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.warnlist-item {
  width: 95%;
  margin: auto;
  height: 100px;
  border-bottom: 1px #fff dashed;
}
.warnlist-item-t {
  width: 100%;
  height: 40px;
  padding: 10px 0px;
  box-sizing: border-box;
}
.address {
  float: left;
  color: #fff;
  font-size: 20px;
}
.type {
  width: 129px;
  height: 40px;
  background-image: url("../../assets/image/right/type.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  float: right;
  color: #fff;
  font-size: 18px;
  text-align: center;
  line-height: 43px;
}
.warnlist-item-b {
  width: 100%;
  height: 60px;
  overflow: hidden;
  padding: 0px 10px;
  box-sizing: border-box;
}
.desc {
  color: #fff;
  font-size: 18px;
  float: left;
}
.content {
  color: #6be6ee;
  font-size: 16px;
  margin-left: 10px;
  float: left;
  width: 400px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 45px;
}
.active {
  background-image: url("../../assets/image/left/tab_active.png");
}
.warnlist::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
.warnlist::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #0affbd;
  }
.warnlist::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   :transparent;
  }
</style>
